<template>
  <view class="start">
    
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>
    <image class="image-header" src="http://image.youxl.cn/m/sc/jiduanhunyuan2/images/img02.png" mode="widthFix" />
    <view class="input-view">
        <view class="user-input">你的名字: <input v-model="userName" type="text"></view>
        <view  class="user-input" >
          另一半的性别:

          <fui-radio-group name="radio" v-model="val">
          <view class="fui-list__item">
            <fui-label>
              <view class="fui-align__center">
                <fui-radio value="1" checked></fui-radio>
                <text class="fui-text">男生</text>
              </view>
            </fui-label>
            <fui-label :margin="['0','0','0','40rpx']">
              <view class="fui-align__center">
                <fui-radio value="2"></fui-radio>
                <text class="fui-text">女孩</text>
              </view>
            </fui-label>
          </view>
        </fui-radio-group>

        </view>
      <view class="mr-commit" @click="commit" :class="sizeStatus ? 'mr-commit-big' : 'mr-commit-small'">立即查看</view> 
    </view>

  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import { futureName } from "@/utils/ab";
import dyUserPlayingService from "@/api/dyUserPlayingService";

const sizeStatus = ref(false)
const show = ref(false)
const userName = ref("")
const emit = defineEmits(['update:defStatus','update:content'])
const val = ref("1")


const sonFun = async()=>{
    const data = await futureName(userName.value,Number(val.value))
    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content',data)
}

const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };

  const commit = async ()=>{

    if(!userName.value){
      uni.showToast({
        title:'请输入姓名',
        icon:'none'
    })
      return
    }
    const {result}  = await dyUserPlayingService.sensitiveWord({word:userName.value})
    if(result){
        uni.hideLoading()
        uni.showToast({
            title: '存在敏感词,请重新填写',
            duration: 2000,
            icon:"none"
        });
        return 
    }
    uni.showLoading({
        title: "加载中",
        icon: "none",
    });
    uni.hideLoading()
    show.value = true
}



onMounted(()=>{
      startTimer()
  })
</script>

<style lang="scss" scoped>
.start{

  .image-header{
    width: 90%;
    position: relative;
    left: 5%;
    margin-top: 20%;
  }

    .input-view {
      width: 90%;
      height: 400rpx;
      padding-top: 5%;
      margin: 0 auto;
      z-index: 102;
      background-image: url("http://image.youxl.cn/m/sc/jiduanhunyuan2/images/input-bg.png");
      background-size: 100% 100%;
      align-items: center;
      padding-left: 8rpx;
      .user-input{
        display: flex;
        padding: 5%;
        input{
          width: 60%;
          text-align: center;
          border-bottom: 1rpx solid black;
        }
        .fui-list__item{
          display: flex;
          align-items: center;
          padding:0 10rpx ;
          .fui-align__center{
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            text{
              margin-left: 10rpx;
              margin-top: -10rpx;
            }
          }
        }
      }
    }
    .mr-commit{
      z-index: 102;
      margin: 0 auto;
      width: 80%;
      height: 90rpx;

      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-image: url("http://image.youxl.cn/m/sc/jiduanhunyuan2/images/btn-bg.png");
  }
  .mr-commit-big{
      width: 82%;
      height: 95rpx;
      transition: all 1s;
  }
  .mr-commit-small{
      width: 80%;
      height: 90rpx;
      transition: all 1s;
  }
}

</style>
